<template>
    <div class="search-box" :class="[showCancle && 'cancal-search-box']" >
    <div class="search-content" @tap.stop @click="handleSearch()">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#keowledge-mobile-sousuo"></use>
      </svg>
      <el-input v-model="searchVal" :placeholder="$t('message.mobile.inputSearchContent')" v-if="isSearch" @keyup.enter="sureHandleSearch" @input="searchValChange"
        @focus="handleFocus"></el-input>
      <div class="click-box-text" v-else>
      {{$t('message.mobile.inputSearchContent')}}
      </div>
      <svg class="icon" aria-hidden="true" v-if="isSearch && searchVal" @click="clearSearchVal('')">
        <use xlink:href="#keowledge-mobile-guanbi-2"></use>
      </svg>
    </div>
    <div class="cancal-button" @tap.stop v-if="showCancle" @click="handleCancal()">{{$t('message.buttons.cancal')}}</div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { setSessionStore,getSessionStore } from '@/utils/store'
import { useRoute, useRouter } from "vue-router"
const router = useRouter();
const route = useRoute()
const emit = defineEmits(["handleFocus","handleCancal","handleSearch",'valChange'])
const props = defineProps({
  isSearch:{
    type:Boolean,
    default:false
  },
  showCancle:{
    type:Boolean,
    default:false
  }
})

const searchVal =ref('')
const routerList = ref([])

onMounted(()=>{
  routerList.value = getSessionStore({name:'mobileRouterList'}) || []
})

function searchValChange(){
  emit('valChange',searchVal.value)
}
function handleSearch(){
  if(props.isSearch){
  }else{
    let currentPath = route.fullPath
    if(routerList.value.indexOf(currentPath)!=-1){
      routerList.value.splice(routerList.value.indexOf(currentPath),1)
    }
    routerList.value.push(currentPath)
    setSessionStore({name:'mobileRouterList',content:routerList.value})
    router.push('/mobile/search')
  }
}
function sureHandleSearch(){
  emit('handleSearch',searchVal.value)
}
function handleCancal(){
  searchVal.value = ''
  emit('handleCancal')
}
function clearSearchVal(val){
  searchVal.value = val
  searchValChange()
}
function setSearchVal(val){
  searchVal.value = val
}
function handleFocus(){
  emit('handleFocus')
}
defineExpose({
  setSearchVal
})
</script>
<style lang="scss" scoped>
.search-box{
  margin-bottom: 1rem;
  margin-left: .9375rem;
  margin-right: .9375rem;
  display: flex;
  align-items: center;
  .search-content{
    background: #F5F6F7;
    height: 2.5rem;
    border-radius: .1875rem;
    display: flex;
    align-items: center;
    padding: 0px .75rem;
    box-sizing: border-box;
    width: 100%;
    svg{
      width: 1rem;
      height: 1rem;
    }
    .click-box-text{
      font-size: .875rem;
      color: #6f7588;
      padding-left: .75rem;
      @include SourceHanSansCN-Regular;
    }
    ::v-deep(.el-input){
      .el-input__wrapper,.el-input__inner{
        box-shadow: none !important;
        border:none !important;
        background-color: transparent !important;
        &::-webkit-input-placeholder{
          font-size: .875rem;
          color: #6f7588;
          @include SourceHanSansCN-Regular;
        }
      }
    }
  }
  .cancal-button{
    font-size: 1rem;
    margin-left: .75rem;
    @include SourceHanSansCN-Regular;
    color: #363B4C;
  }
}
.cancal-search-box{
  .search-content{
    width: calc(100% - 2.8125rem);
  }
}
</style>